<template>
  <div class="side-navbar">
    <div class="nav-box">
      <div :style="{transform:'translateY('+ (34 * activeIndex +11) +'px)'}" class="nav-slider"></div>
      <div v-for="(item, index) in $navbarItems" :key="item" class="nav-item">
        <div @click="menuClicked(item,index)" :class="{'selected':index==activeIndex}" class="nav-item-text">
          {{item}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SideNavbar',
  data () {
    return {
      activeIndex: 0
    };
  },
  watch: {
    $route (to, from) {
      this.updateActiveIndex(to);
    }
  },
  mounted () {
    this.updateActiveIndex(this.$route);
  },
  beforeRouteUpdate (to) {
    this.updateActiveIndex(to);
  },
  methods: {
    updateActiveIndex: function (route) {
      if (route.name === 'home') {
        this.activeIndex = 0;
      } else if (route.name === 'cate') {
        this.activeIndex = route.params.cate;
      }
    },
    menuClicked: function (item, index) {
      if (index === 0) {
        this.$router.push('/');
      } else {
        this.$router.push({ name: 'cate', params: { cate: index, key: ' ' } });
      }
    }
  }
};
</script>
<style src="./index.scss" lang="scss" scoped></style>
